<!-- D:\project\en_haiou\enhaiou-PC\static\images\drug -->
<template>
  <div class="pagebody">
    <!-- <pageHeader :pageindex="1"></pageHeader>
    <bannercom :type="7"></bannercom> -->
    <HomeHeadeh />
    <div class="container">
      <div class="breadnav">
        <nuxt-link to="/">Homepage</nuxt-link><img src="@/static/images/drug/breadright.png"
             alt=""><nuxt-link :to="{ name: 'druglist', params: { page: 1 } }">Drugs</nuxt-link><img src="@/static/images/drug/breadright.png"
             alt=""><nuxt-link :to="{ name: 'drug', params: { id: drug.id } }">{{
            drug.name }}</nuxt-link>
      </div>
      <div class="drugbox">
        <div class="left">
          <div class="cardList">
            <div class="img">
              <video v-if="imglists[isimg].videourl != null"
                     width="418px"
                     height="310px"
                     controls
                     :src="imglists[isimg].videourl"></video>
              <img v-else
                   :src=imglists[isimg].imgurl
                   class="zimg"
                   alt=""
                   title="">
            </div>
            <div class="imglist flex-row align-center">
              <div class="leftImgbox">
                <img v-if="imgindex == 0 || allno == 1"
                     src="/images/drug/noleft.png"
                     alt=""
                     style="width: 16px;">
                <img v-else
                     src="/images/drug/left.png"
                     alt=""
                     class="preimg"
                     :class="preOpacity == 0.3 ? '' : 'csp'"
                     @mousemove="overPopacity"
                     @mouseout="outPopacity"
                     @click="preimg"
                     :style="{ opacity: preOpacity }">
              </div>
              <div class="imgsbox">
                <div class="anyimg"
                     :style="{ transform: `translateX(${translateX}px)` }">
                  <div v-for="(item, index) in imglists"
                       :key="index"
                       @mousemove="isimg = index"
                       :style="{ borderColor: `${isimg == index ? '#02B7CA' : ''}` }"
                       class="oneimg pos-rel">
                    <img class="show_img"
                         :src="item.imgurl">
                    <img v-show="item.videourl != null"
                         class="videologo pos-abs"
                         src="/images/drug/videologo.jpg"
                         alt="">
                  </div>
                </div>
              </div>
              <div class="rightImgbox">
                <img v-if="imgindex == imgnum || allno == 1"
                     src="/images/drug/noright.png"
                     alt=""
                     style="width: 16px;">
                <img v-else
                     src="/images/drug/right.png"
                     alt=""
                     class="nextimg"
                     :class="nextOpacity == 0.3 ? '' : 'csp'"
                     @mousemove="overNopacity"
                     @mouseout="outNopacity"
                     @click="nextimg"
                     :style="{ opacity: nextOpacity }">
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title">
            <h2>{{ drug.name }}</h2>
          </div>
          <div class="allname mt16">
            <div class="label">Names</div>
            <div class="allnamecontent lineclamp2">
              {{ drug.alias }}
            </div>
          </div>
          <div class="allname"
               style="margin-top: 37px;">
            <div class="label1">Indicatons</div>
            <div class="allnamecontent lineclamp2"
                 v-html="drug.suitableforthecroud ? truncateText(drug.suitableforthecroud, 120) : ''">
            </div>
          </div>
          <div class="isnore borderbox ">
            <p class="lineclamp3">
              This product is used in the early treatment of liver failure on top of comprehensive therapy to reduce
              bilirubin and increase prothrombin activity.This product is used in the early treatment of liver failure on
              top of comprehensive therapy to reduce bilirubin and increase prothrombin activity.
            </p>
          </div>

          <div class="Tipsbox">
            <!-- <p class="mb10" v-show="!drug.informationSources"> <span style="color: red;">Reminder：</span>{{
              drug.informationSources ? drug.informationSources : noinfor
            }} </p>
            <p v-show="drug.informationSources"><span style="color: red;"> Reminder：</span>{{ drug.informationSources }}
            </p> -->
            <p>
              Reminder: The outer packaging is for reference only, please purchase and use under the guidance of a
              pharmacist. For read by medical and pharmaceutical professionals only.
            </p>

          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="details">
        <div class="leftbox">
          <div class="bgfff mb16">
            <div class="ypgs"
                 v-show="isnav == 0">
              <!-- <div class="title">{{ drug.name }}说明书</div> -->
              <div class="tips"
                   v-html="drug.mutual"></div>
              <!-- <div class="toptext"
                   v-html="drug.tdkDescribe"></div> -->
              <div class="clinicaldetails">
                <div class="infocard">
                  <div class="infotitle">Product name</div>
                  <div class="infocontent">{{ drug.productName }}</div>
                </div>
                <div class="infocard infocard2">
                  <div class="infotitle">Other aliases</div>
                  <div class="infocontent">{{ drug.name }}</div>
                </div>
                <div class="infocard">
                  <div class="infotitle">Indications</div>
                  <div class="infocontent"
                       v-html="drug.adaptationdisease"></div>
                </div>
                <!-- <div class="infocard infocard2">
                  <div class="infotitle">manufacturer</div>
                  <div class="infocontent">{{ drug.manuName }}</div>
                </div> -->
                <div class="infocard infocard2">
                  <div class="infotitle">Introduction</div>
                  <div class="infocontent">{{ drug.introduction }}</div>
                </div>
                <div class="infocard ">
                  <div class="infotitle">Specification</div>
                  <div class="infocontent"
                       v-html="drug.specifications"></div>
                </div>
                <div class="infocard infocard2">
                  <div class="infotitle">Price</div>
                  <div class="infocontent">{{ drug.priceSpecifications }}</div>
                </div>
                <div class="infocard ">
                  <div class="infotitle">Validity period</div>
                  <div class="infocontent">{{ drug.periodOfValidity }}</div>
                </div>
                <div class="infocard infocard2">
                  <div class="infotitle">Storage</div>
                  <div class="infocontent">{{ drug.storagecondition }}</div>
                </div>
                <div class="infocard">
                  <div class="infotitle">Dosage form</div>
                  <div class="infocontent">{{ drug.dosage }}</div>
                </div>
                <!-- <div class="infocard">
                  <div class="infotitle">Indicated Population</div>
                  <div class="infocontent">{{ drug.intendedPopulation }}</div>
                </div> -->
                <!-- <div class="infocard infocard2">
                  <div class="infotitle">Description</div>
                  <div class="infocontent"
                       v-html="drug.xingzhuang"></div>
                </div> -->
                <!-- <div class="infocard infocard2">
                  <div class="infotitle">Dosage and Administration</div>
                  <div class="infocontent"
                       v-html="drug.usageanddosage1"></div>
                </div> -->

              </div>
            </div>
            <drugType :drug=drug></drugType>
            <understand></understand>
            <medicinePrice :name="'Recommended articles'"
                           :newslist="comNewslist"></medicinePrice>
            <medicinePrice :name="'Related articles'"
                           :newslist="newslist"></medicinePrice>

          </div>
        </div>
        <right></right>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>


import understand from '@/components/seagull/understand'
import right from '@/components/right/right'
import medicinePrice from '@/components/drugs/medicinePirce'
import drugType from '@/components/drugs/drugType'
import { getDrugById, getNewsList } from '@/api/api'

export default {
  name: 'drugDetail',
  components: {
    understand,
    right,
    medicinePrice,
    drugType
  },
  async asyncData ({ app, params, error }) {
    let drugid = params.id
    let drugresponse = await app.$axios.get(getDrugById + drugid)
    let drug = drugresponse.data
    console.log("drug", drug)
    if (drug == null) {
      error({ statusCode: 404 })
      return
    }
    let manuName = drug.drugEnterpriseList ? drug.drugEnterpriseList.map(item => item.englishName).join(', ') : '';
    // 图片的处理
    let zhutu = drug.icon
    let allno = 0
    let imglists = []
    let imgnum = 0
    if (drug.photoalbum) {
      // 如果有这个数据
      let a_arr = drug.photoalbum.split(",")
      a_arr.forEach(element => {
        let data = {
          videourl: null,
          imgurl: element
        }
        imglists.push(data)
      });
      let zhutudata = {
        videourl: null,
        imgurl: zhutu
      }
      imglists.unshift(zhutudata)
      if (drug.video) {
        let videodata = {
          videourl: drug.video,
          imgurl: zhutu
        }
        imglists.unshift(videodata)
      }
      if (imglists.length <= 4) {
        allno = 1
      } else {
        imgnum = imglists.length - 4
      }
    } else {
      // 如果没有
      if (drug.videos) {
        let videodata = {
          videourl: drug.videos,
          imgurl: zhutu
        }
        imglists.unshift(videodata)
      } else {
        let data = {
          videourl: null,
          imgurl: zhutu
        }
        imglists.unshift(data)
        allno = 1
      }
    }
    //获取药品下相关的文章
    let data = {
      drugId: drugid,
      pageNum: 1,
      pageSize: 6,
      orderByColumn: 'updateTime',
      isAsc: 'desc',
      flag: 'false',
      state: "1",
    }
    const newslist = await app.$axios.post(getNewsList, data)

    //获取药品下推荐的相关文章
    let param = {
      drugId: drugid,
      pageNum: 1,
      pageSize: 4,
      orderByColumn: 'updateTime',
      isAsc: 'desc',
      flag: 'false',
      state: "1",
      label: "3"
    }
    const comNewslist = await app.$axios.post(getNewsList, param)

    let webpagetitle = "";
    let webpagedescription = "";
    let webpagekeywords = "";
    let nofindtitle = drug.name + ",Instruction-Seagull Pharmacy"
    // Check drugTdks array for matching type
    if (drug.drugTdks && Array.isArray(drug.drugTdks)) {
      const matchedTdk = drug.drugTdks.find(item => item.type == '01');
      webpagetitle = matchedTdk ? matchedTdk.title : nofindtitle;
      webpagedescription = matchedTdk ? matchedTdk.description : 'description';
      webpagekeywords = matchedTdk ? matchedTdk.keywords : 'keywords';
    } else {

    }


    return {
      webpagetitle: webpagetitle,
      webpagedescription: webpagedescription,
      webpagekeywords: webpagekeywords,
      drugid: drugid,
      drug: drug,
      zhutu: zhutu,
      imgnum: imgnum,
      imglists: imglists,
      allno: allno,
      newslist: newslist.rows,
      comNewslist: comNewslist.rows,
      manuName: manuName
    }
  },
  head () {
    return {
      // tdk设置
      title: this.webpagetitle,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.webpagedescription,
        },
        {
          hid: "keywords",
          name: "keywords",
          content: this.webpagekeywords,
        },
      ],
    };
  },
  data () {
    return {
      isimg: 0,
      translateY: 0,
      imgnum: 0,
      imgindex: 0,
      preOpacity: 0.5,
      nextOpacity: 0.5,
      callbacktel: "",
      isnav: 0,
      othernavcontent: "",
      smslist: [],
      noinfor: 'The drug images are from the internet and are for reference only; If there is a delay in the releaseofnewpackaging, please refer to the actual product.If there is any infringement, please contact usfordeletion.',
      typelist: [
        { name: 'Indications of ' }, //适应症
        { name: 'Dosage and Administration of ' },//用法用量
        { name: 'Prices of ' },//价格购买
        { name: 'Therapeutic effects of ' },//治疗效果
        { name: 'Precautions of ' },//注意事项
        { name: 'Adverse reactions of ' },//副作用
      ],

    }
  },
  mounted () {

  },
  methods: {
    truncateText (text, maxLength) {
      if (!text || text.length <= maxLength) return text;

      // 找到最后一个空格的位置
      const lastSpace = text.slice(0, maxLength).lastIndexOf(' ');

      // 如果找不到空格，就按原长度截取
      if (lastSpace === -1) return text.slice(0, maxLength) + '...';

      // 在最后一个空格处截断
      return text.slice(0, lastSpace) + '...';
    },
    nextimg () {
      //("右滚动");
      this.translateX -= 88;
      this.imgindex++
      this.preOpacity = 0.5
    },
    preimg () {
      this.translateX += 88;
      this.imgindex--
      this.nextOpacity = 0.5
    },
    overPopacity () {
      this.preOpacity = 1
    },
    outPopacity () {
      this.preOpacity = 0.5
    },
    overNopacity () {
      this.nextOpacity = 1
    },
    outNopacity () {
      this.nextOpacity = 0.5
    },



  },
}

</script>

<style lang="scss" scoped>
.pagebody {
  background: #ffffff;

  .Tipsbox {
    width: 691px;
    height: 28px;
    font-family: Arial, Arial;
    font-weight: 400;
    font-size: 12px;
    color: #8a95a2;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 16px;
  }

  .breadnav {
    height: 30px;
    line-height: 30px;
    margin-top: 16px;
    font-size: 12px;
    color: #7a8599;

    img {
      width: 6px;
      margin: 0 10px;
    }
  }

  .drugbox {
    margin-top: 8px;
    background: #fff;
    box-sizing: border-box;
    padding: 33px 24px 0px;
    display: flex;

    .left {
      width: 460px;
      display: flex;
      align-items: center;

      .cardList {
        background-color: #fff;
        padding-top: 8px;

        .img {
          width: 460px;
          height: 460px;
          display: flex;
          align-items: center;
          border: 1px solid #dde8eb;
          overflow: hidden;

          .zimg {
            width: 460px;
          }
        }

        .imglist {
          margin-top: 8px;
          width: 460px;

          .imgsbox {
            height: 80px;
            width: 400px;
            overflow: hidden;

            .anyimg {
              display: flex;
              align-items: center;
              transition: transform 0.3s;

              :first-child.oneimg {
                margin-left: 10px;
              }

              .oneimg {
                width: 72px;
                height: 72px;
                margin-right: 6px;
                border: 1px solid #dde8eb;
                flex-shrink: 0;

                .show_img {
                  width: 72px;
                }

                .videologo {
                  opacity: 0.8;
                  width: 28px;
                  z-index: 1;
                  top: 14px;
                  left: 26px;
                }
              }
            }
          }
        }
      }
    }

    .right {
      margin-left: 32px;

      .title {
        margin-top: 24px;
        display: flex;
        align-items: center;

        .rx {
          width: 42px;
          height: 26px;
          border-radius: 50%;
          background: #0c00fd;
          color: #fff;
          font-weight: bold;
          font-size: 18px;
          text-align: center;
          line-height: 26px;
          margin-right: 8px;
        }
      }

      .allname {
        display: flex;
        margin-top: 32px;

        .label {
          text-align: center;

          width: 88px;
          background: #f5f8fd;
          border-radius: 0px 8px 8px 8px;
          font-size: 14px;
          color: #0041a3;
          line-height: 26px;
          flex-shrink: 0;
        }

        .label1 {
          text-align: left;
          height: 26px;
          width: 68px;
          background: #f5f8fd;
          border-radius: 0px 8px 8px 8px;
          font-size: 14px;
          color: #0041a3;
          line-height: 26px;
          flex-shrink: 0;
          padding: 0 10px;
        }

        .allnamecontent {
          margin-left: 10px;
          line-height: 28px;
          color: #2e343e;
        }
      }

      .isnore {
        background: #f5f8fb;
        margin-top: 37px;
        padding: 16px 24px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 16px;
        color: #0041a3;
        line-height: 32px;
        text-align: justify;
      }

      .tips {
        margin-top: 16px;
        height: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #db7979;
        line-height: 14px;
        font-style: normal;
        text-align: left;
        text-transform: none;

        ::v-deep p {
          color: #293347;
          font-size: 18px;
          line-height: 32px;
          margin-top: 16px;
          margin-bottom: 16px;
          text-indent: 36px;
        }
      }

      .cktips {
        margin-top: 24px;
        height: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #666;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .callus {
        margin-top: 32px;
        display: flex;

        .zxzj {
          width: 136px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #ffffff;
          background: #0078ff;
          border-radius: 0px 0px 0px 0px;
        }

        .callback {
          display: flex;
          margin-left: 16px;
          width: 481px;
          height: 36px;
          border-radius: 0px 0px 0px 0px;
          border: 2px solid #0078ff;

          input {
            width: 297px;
            height: 36px;
            padding: 0 16px;
            font-size: 18px;
            border: none;
          }

          .btn_call {
            width: 184px;
            height: 36px;
            background: #0078ff;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 24px;
              margin-right: 8px;
            }
          }
        }
      }

      .yesbox {
        display: flex;
        margin-top: 24px;

        .yes {
          margin-right: 34px;
          font-weight: 400;
          font-size: 16px;
          color: #293347;
          font-style: normal;
          text-transform: none;
          display: flex;
          align-items: center;

          img {
            width: 24px;
            margin-right: 8px;
          }
        }
      }
    }
  }

  .details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 94px;
    margin-top: 16px;

    .leftbox {
      width: 848px;

      .detailsnav {
        height: 58px;
        border-bottom: 1px solid #dde8eb;
        display: flex;
        align-items: center;
        padding: 0 24px;
        background: linear-gradient(
          180deg,
          rgba(229, 241, 255, 0.76) 0%,
          rgba(229, 241, 255, 0.05) 100%
        );

        li {
          height: 58px;
          line-height: 58px;
          margin-right: 24px;
          font-size: 18px;
          color: #293347;
          cursor: pointer;
        }

        .active {
          font-weight: bold;
          color: #003399;
          border-bottom: 2px solid #003399;
        }
      }

      .ypgs {
        padding: 0px 24px 24px;
        box-sizing: border-box;
        background: #fff;

        .title {
          font-weight: bold;
          font-size: 22px;
          color: #003399;
          text-align: center;
        }

        .tips {
          font-weight: 400;
          font-size: 18px;
          line-height: 32px;
          color: #2e343e;
          text-align: justify;

          ::v-deep p {
            text-align: justify;
            font-weight: 400;
            font-size: 18px;
            line-height: 32px;
            color: #2e343e;
            margin-bottom: 16px;
          }
        }

        .toptext {
          margin-top: 24px;
          text-indent: 36px;
        }

        .clinicaldetails {
          margin-top: 16px;
          border: 1px solid #f5f8fb;

          .infocard {
            background-color: #ffffff;
            display: flex;
            justify-content: flex-start;
            padding: 24px 16px 24px 0px;

            .infotitle {
              flex-shrink: 0;
              width: 160px;
              border-right: 1px solid #d5e1ef;
              font-weight: 400;
              font-size: 18px;
              color: #5a6478;
              height: 32px;
              text-align: right;
              padding-right: 16px;
            }

            .infocontent {
              overflow: hidden;
              text-align: justify;
              font-weight: 400;
              font-size: 18px;
              color: #293347;
              line-height: 32px;
              padding-left: 16px;
              max-width: 620px;
              color: #2e343e;

              ::v-deep p {
                text-align: justify;
                font-weight: 400;
                font-size: 18px;
                color: #293347;
                line-height: 32px;
                padding-left: 16px;
                max-width: 620px;
                color: #2e343e;
              }

              ::v-deep h2,
              h3,
              h4 {
                text-align: justify;
                font-weight: 800;
                font-size: 18px;
                color: #293347;
                line-height: 32px;
                padding-left: 16px;
                max-width: 620px;
                color: #2e343e;
              }
            }
          }

          .infocard2 {
            background-color: #f5f8fb;
          }
        }
      }

      .othernavcontent {
        padding: 40px 24px 24px;
        box-sizing: border-box;
        background: #fff;

        ::v-deep h2 {
          color: #002162;
          font-weight: bold;
          margin-top: 24px;
          margin-bottom: 24px;
          text-indent: 36px;
        }

        ::v-deep h3 {
          color: #293347;
          font-weight: bold;
          margin-top: 16px;
          font-size: 20px;
          margin-bottom: 16px;
          text-indent: 36px;
        }

        ::v-deep h4 {
          color: #293347;
          font-weight: bold;
          margin-top: 16px;
          font-size: 18px;
          margin-bottom: 16px;
          text-indent: 36px;
        }

        ::v-deep p {
          color: #293347;
          font-size: 18px;
          line-height: 32px;
          margin-top: 16px;
          margin-bottom: 16px;
          text-indent: 36px;
        }

        ::v-deep p > span {
          text-wrap: warp !important;
        }

        ::v-deep a {
          font-size: 18px;
          color: #003399;
        }
      }
    }

    .rightbox {
      width: 333px;
    }

    .drugType {
      background-color: #ffffff;
      width: 824px;
      margin-top: 16px;
      box-sizing: border-box;

      .title {
        border-bottom: 1px solid #dfe2e7;
        display: flex;
        justify-content: flex-start;

        .tilfon {
          font-weight: bold;
          font-size: 18px;
          color: #0041a3;
          line-height: 60px;
          border-bottom: 4px solid #0041a3;
        }
      }

      .typelist {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .contentcard {
          margin-top: 16px;
          width: calc(50% - 8px);
          /* 每个 li 占 50% 宽度，减去半个间隔 */
          height: 50px;
          background: #eef6ff;
          box-sizing: border-box;
          display: flex;
          /* 水平居中 */
          align-items: center;
          padding-left: 16px;

          /* 垂直居中 */
          .typename {
            //width: 294px;
            height: 18px;
            font-family: Arial, Arial;
            font-weight: bold;
            font-size: 18px;
            color: #0041a3;
            line-height: 18px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            white-space: normal;
            -webkit-line-clamp: 1;
          }

          .content {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 8px;

            .left {
              font-weight: 400;
              font-size: 14px;
              color: #5a6478;
              line-height: 18px;
              flex-shrink: 0;
            }

            .right {
              margin-left: 4px;
              font-weight: 400;
              font-size: 14px;
              color: #293347;
              line-height: 18px;
            }
          }
        }
      }
    }
  }
}
</style>